<!-- eslint-disable vue/no-multiple-template-root -->
<template>
<div>
    <div id="header">
      <label class="text">{{ title }}</label>
      <input id="todo" class="head" type="text" placeholder="请输入代办事项" @keyup.enter="add" v-model="invalue"/>
      <button id="add" class="add" @click="add">添加</button>

    </div>

</div>
</template>


<script>
import {nanoid} from 'nanoid'
export default {
    name:'myHead',
    props:['addItems'],
    data(){
        return{
            title:'TodoList',
            invalue:'',
        }
    },
    methods:{
        add(){
            // 将用户的数据包装为对象
            const itemOBJ = {id:nanoid(),title:this.invalue,done:false};  // 直接获得  双向绑定
            // console.log("这是e",title:e.target.value);     add(e)  去获取
            this.addItems(itemOBJ);
        }
    }
}
</script>
<style scoped>
#header {
    margin: 0 auto;
    font-size: 50px;
    width: 700px;
    text-align: center;
    height: 150px;
}
 
.title {
    display: inline-flex;
}
 
.head {
    border-radius: 25px;
    width: 500px;
    height: 60px;
    box-shadow: 5px 5px 10px #556677;
    border: 1px solid #556677;
    font-size: 30px;
    padding-left: 25px;
    outline: 0;
    margin: 0 auto;
    display: inline-flex;
}
 
.add {
    width: 80px;
    height: 50px;
    border-radius: 25px;
    outline: 0;
    border: 1 solid #556677;
    float: right;
    margin: 20px 0 0;
    font-size: 20px;
}
</style>